<template>
	<cl-page background-color="transparent" :fullscreen="true" :statusBar="false">
		<view class="page-login animate__animated animate__fadeIn">
			<image src="/static/images/close.png" mode="aspectFill" class="close" @click="router.back()"></image>
			<view class="title">{{ $t("login.register") }}</view>
			<cl-form ref="Form" v-model="form" :rules="rules" label-width="150rpx">
				<cl-form-item :label="t('login.phone')" prop="phone">
					<cl-input v-model="form.phone" :border="false" :placeholder="t('login.phone_p')"
						placeholder-class="placeholder" maxlength="11"></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('login.code')" prop="verificationCode">
					<cl-input v-model="form.verificationCode" maxlength="6" :border="false"
						:placeholder="t('login.code_p')" placeholder-class="placeholder">
						<template #append>
							<smsBtn :phone="form.phone"></smsBtn>
						</template>
					</cl-input>
				</cl-form-item>
				<cl-form-item :label="t('login.password')" prop="password">
					<cl-input type="password" v-model="form.password" :border="false" :placeholder="t('login.pass_p')"
						placeholder-class="placeholder"></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('login.confirm_pass')" prop="confirmPassword">
					<cl-input type="password" v-model="form.confirmPassword" :border="false"
						:placeholder="t('login.confirm_pass_p')" placeholder-class="placeholder"></cl-input>
				</cl-form-item>
			</cl-form>
			<button class="register" :loading="btnLoading" @click="submit">{{ $t("login.register")
				}}</button>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import smsBtn from "/@/components/sms-btn.vue";
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const app = useApp();
const ui = useUi();
const Form = ref<ClForm.Ref>();
const form = reactive<any>({
	phone: "",
	verificationCode: "",
	password: "",
	confirmPassword: "",
});
const btnLoading = ref(false);
const rules = reactive<any>({
	phone: [{
		required: true,
		message: t("login.phone_p"),

	}, { pattern: /^1[3-9]\d{9}$/, message: t("login.phone_p_"), trigger: 'blur' }],
	verificationCode: {
		required: true,
		message: t("login.code_p"),
	},
	password: {
		required: true,
		message: t("login.password_p"),
	},
	confirmPassword: {
		required: true,
		message: t("login.confirm_pass_p"),
	},
});

const submit = () => {
	Form.value?.validate(async (valid, errors) => {
		if (valid) {
			if (form.password != form.confirmPassword) {
				ui.showToast(t("login.confirm_pass_p_"));
				return;
			}
			btnLoading.value = true;
			try {
				const data = await service.api.register(form);
				ui.showToast(data.message);
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/login/login",
					});
				}, 1000);
			} catch (error) {
				ui.showToast(error.message);
			}
			btnLoading.value = false;
		}
	});
};
</script>

<style lang="scss" scoped>
.page-login {
	position: relative;
	height: 100vh;
	padding-top: 281rpx;
	box-sizing: border-box;
	padding: 281rpx 30rpx 0;

	.title {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 58rpx;
		color: #333333;
		margin-bottom: 100rpx;
	}

	.close {
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		top: 110rpx;
		right: 30rpx;
	}

	.register {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
		border-radius: 10rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		line-height: 88rpx;
		margin-top: 120rpx;
	}
}
</style>
